// 依赖包漏洞检测表格
import React from 'react';
import PropTypes from 'prop-types';
import { YunxiaoTable } from '@alife/devops-ui';
import IssuesTable from './issuesTable';
import './index.scss';
import intl from '../../locale';

export default class BuildIssuesList extends React.Component {
  static propTypes = {
    branchName: PropTypes.string,
    buildResult: PropTypes.object,
    filterParams: PropTypes.object,
    updateCommitId: PropTypes.func,
  };

  static defaultProps = {
    branchName: 'master',
    filterParams: {},
    updateCommitId: () => {},
  };

  renderTitle = (title) => (
    <>
      <span style={{ width: '38px' }}>&nbsp;</span>
      {title}
    </>
  );

  render() {
    return (
      <div className="build-issue-list-container">
        <div className="build-issue-list-header">
          <YunxiaoTable
            className={'issue-table'}
            dataSource={[
              {
                id: 0,
                dependency: intl.get({
                  id: 'code-assets.components.dependencyBuildIssuesList.RelyOn',
                  defaultMessage: '依赖',
                }),
                dependency_version: intl.get({
                  id: 'code-assets.components.dependencyBuildIssuesList.Version',
                  defaultMessage: '版本',
                }),
                file_path: intl.get({
                  id: 'code-assets.components.dependencyBuildIssuesList.File',
                  defaultMessage: '文件',
                }),
                issue_level: intl.get({
                  id: 'code-assets.components.dependencyBuildIssuesList.Vulnerability',
                  defaultMessage: '漏洞',
                }),
              },
            ]}
            hasBorder={false}
            hasHeader={false}
          >
            <YunxiaoTable.Column
              title={intl.get({
                id: 'code-assets.components.dependencyBuildIssuesList.RelyOn',
                defaultMessage: '依赖',
              })}
              dataIndex="dependency"
              cell={this.renderTitle}
              className="dependency-issue-title-col"
              width={100}
            />
            <YunxiaoTable.Column
              title={intl.get({
                id: 'code-assets.components.dependencyBuildIssuesList.Version',
                defaultMessage: '版本',
              })}
              dataIndex="dependency_version"
              className="dependency-issue-version-col"
              width={60}
            />
            <YunxiaoTable.Column
              title={intl.get({
                id: 'code-assets.components.dependencyBuildIssuesList.File',
                defaultMessage: '文件',
              })}
              dataIndex="file_path"
              className="dependency-issue-file-col"
              width={100}
            />
            <YunxiaoTable.Column
              title={intl.get({
                id: 'code-assets.components.dependencyBuildIssuesList.Vulnerability',
                defaultMessage: '漏洞',
              })}
              dataIndex="issue_level"
              className="dependency-issue-level-col"
              width={100}
            />
          </YunxiaoTable>
        </div>
        <div className="build-issue-list-waiting">
          <IssuesTable
            headerTitle={intl.get({
              id: 'code-assets.components.dependencyBuildIssuesList.UnresolvedIssues',
              defaultMessage: '未解决问题',
            })}
            issue_status="unresolved"
            {...this.props}
          />
        </div>
        <div className="build-issue-list-fixed">
          <IssuesTable
            headerTitle={intl.get({
              id: 'code-assets.components.dependencyBuildIssuesList.ResolvedIssue',
              defaultMessage: '已解决问题',
            })}
            issue_status="resolved"
            {...this.props}
          />
        </div>
      </div>
    );
  }
}
